<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { reactive, watch, ref } from 'vue'
import {
  transportSelectpage,
  deliverGetSelectList,
  goodsSel,
  clientSelect,
  placeendSelect,
  submarketSelect,
  // packSelect,
  placestartSelect,
  // repertoryIndex,
  getClientRepertoryList,
  storeIndex,
  consigneeIndex,
  empSelect,
  user_brokerageSelectpage,
  customsSelect
} from '@/api/common'
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElSelect,
  ElOption,
  ElDivider,
  ElInputNumber,
  TabsPaneContext,
  ElTabs,
  ElButton,
  ElTable,
  ElTableColumn,
  ElTabPane,
  ElTransfer,
  ElLoading,
  FormInstance,
  FormRules,
  ElMessage
} from 'element-plus'
import { NumberFormat } from 'vue-i18n'

const { t } = useI18n()

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

let isEidt = ref(false)
let currentRowVal: any = null
watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    isEidt.value = true
    currentRowVal = currentRow
    console.log('----行数据？---', isEidt)
    form.modeOfTransport = Number(currentRow.transport_id) //运输方式
    form.modeOfTransportText = currentRow.transport_text // 运输方式中文,
    form.customerManagement = currentRow.client_code // 客户号
    // form.typeOfGoods = currentRow.goods_id //货物种类
    form.typeOfGoods[0] = 59
    form.typeOfGoodsText = currentRow.goods_text // 获取种类中文
    form.shipper = currentRow.fahuo //出库人
    form.consignee = currentRow.shouhuo //收货人
    form.totalWeight = currentRow.weight //重量合计
    form.number = currentRow.quantity //数量
    form.totalVolume = currentRow.volume //体积合计
    form.density = currentRow.density //密度
    form.consigneePhone = currentRow.shouhuo_mobile //收货人电话
    form.totalNumberOfpices = currentRow.units //件数合计
    form.origin = currentRow.placestart_id //始发地
    form.originText = currentRow.placestart_text //始发地的中文
    form.address = currentRow.placeend_id //目的地
    form.addressText = currentRow.placeend_text //目的地中文
    form.packagingType = currentRow.pack_id //包装方式
    form.packagingTypeText = currentRow.pack_text //包装方式zw
    form.distributionMarket = Number(currentRow.submarket_id) //分货市场
    form.distributionMarketText = currentRow.submarket_text //分货市场zw
    form.salespersonName = currentRow.salesman //业务员姓名
    form.base_price = currentRow.base_price //业务底价
    form.businessFloorreight = currentRow.base_freight //业务底价运费
    form.RMBPrice = currentRow.cny_value //人民币货值
    form.dollarPrice = currentRow.usd_value //美元货值
    // form.exchangeRate = currentRow.usd_cny //汇率:美元-人民币
    form.bvjs = currentRow.insurance //保率方式:1=百货,2=服装,99=手动
    form.guaranteeRate = currentRow.insurance_rate //保率
    form.valuePreservationPerKilogram = currentRow.kilo_value //每公斤货值
    form.businessFloorPrice = currentRow.insurance_fee //应收保险费
    form.packagingCalculation = currentRow.pack_type //包装计算方式:1=按件,2=按重
    form.pack_fee = currentRow.pack_fee //包装费用
    form.packingCharge = currentRow.package //打包费用
    form.freightCalculationMethod = currentRow.transport_type //运费计算方式:1=按件,2=按重量,99=手动
    form.fieghtPrice = currentRow.transport_price //运费价格
    form.freight = currentRow.transport_fee //运费
    form.shortdistancefee = currentRow.short_fee_cny //短途费
    form.shortdistancefeeUSD = currentRow.short_fee_usd //短途费美金
    form.invoicing = currentRow.agency_fund //代收款
    form.otherReceivables = currentRow.other_fund //其他应收款
    form.surcharge = currentRow.append_fund //附加费
    form.otherReceivables = currentRow.goods_fee //应收货款
    form.delivery_market = currentRow.delivery_market //到货市场
    form.delivery_price = currentRow.delivery_price //收货单价
    form.paymentMethod = currentRow.paytype //付款类型未看到具体的暂定，1=，2=3=，4=
    form.totalReceivableExpenses = currentRow.total_fee //应收总费用
    form.illustrate = currentRow.explain //说明
    form.notes = currentRow.remark //备注
    form.whetherToImitateTheBrand = Number(currentRow.imitate) //是否仿牌
    form.state = currentRow.state //单据状态
    form.audit = currentRow.audit //审核人
    form.enact = currentRow.username //制单人
    form.enacttime = currentRow.enacttime //制单时间
    form.brokerage_name = currentRow.brokerage_name //返佣姓名
    form.brokerage_rate = currentRow.brokerage_rate //返佣比例
    form.brokerage_money = currentRow.brokerage_money //返佣金额
    form.brokerage_status = Number(currentRow.brokerage_status) //返佣状态
    form.brokerage_remark = currentRow.brokerage_remark //返佣备注
    form.foreignExpenses = currentRow.foreign_charge //国外费用
    form.productNameRemarks = currentRow.remark2 //品名备注
    form.mustPrice = currentRow.goods_fee //应收货款
    form.transport_expires = currentRow.transport_expires //应收货款
    form.store_id = currentRow.store_id //仓库
    form.waybill = currentRow.waybill // 运单号
    form.batchno = currentRow.batchno // 批次号
    form.customs_name = Number(currentRow.customs_name) // 清关公司名称
    form.export_weight = currentRow.export_weight // 转出重量
    form.export_volume = currentRow.export_volume // 转出体积
    form.export_density = currentRow.export_density // 转出密度
    form.export_value = currentRow.export_value // 转出货值
    form.export_insure = currentRow.export_insure // 转出保险
    form.export_other_fund = currentRow.export_other_fund // 转出其它费
    form.customs_price = currentRow.customs_price // 清关价格
    form.customs_money = currentRow.customs_money // 清关金额
    form.export_transport = currentRow.export_transport // 转出运输方式
    form.margin = currentRow.margin // 毛利润
    form.internal_charge = currentRow.internal_charge // 国内费用
    form.pledge = currentRow.pledge // 押金
    form.remark2 = currentRow.remark2 // 商标备注
    form.foreign_charge = currentRow.foreign_charge // 国外费用
    form.houcheng = currentRow.houcheng // 后程不可回收
    form.export_insurance_rate = currentRow.export_insurance_rate
    getRepertorIndex()
  }
)

const form: any = reactive({
  typeOfGoods: [],
  typeOfGoodsText: '',
  locationOfGoods: '',
  transport: '',
  origin: '',
  originText: '',
  address: '',
  addressText: '',
  shortdistancefee: '',
  shortdistancefeeUSD: '',
  surcharge: '',
  freightCalculationMethod: '1',
  packingCharge: '',
  valuePreservationPerKilogram: '',
  freight: '',
  packagingCalculation: '',
  Compensation: '',
  rmbValue: '',
  packagingType: [],
  packagingTypeText: '',
  relatedCustomers: '',
  warehousingTime: '',
  productNameRemarks: '',
  waybillNumber: '',
  numberOfInboundPieces: '',
  documentStatus: '',
  customerNo: '',
  shipper: '',
  consignee: '',
  consigneePhone: '',
  destination: '',
  modeOfTransport: '',
  modeOfTransportText: '',
  distributionMarket: '',
  distributionMarketText: '',
  receivingDate: '',
  dateOfIssuance: '',
  totalWeight: '',
  totalVolume: '',
  packingQuantity: '',
  usDollarCreditValue: '',
  guaranteeRate: '',
  insurancePercentage: '',
  packingCharges: '',
  businessFloorFreight: '',
  otherReceivables: '',
  invoicing: '',
  fieghtPrice: '',
  totalReceivableExpenses: '',
  salespersonName: '',
  number: '',
  businessFloorPrice: '',
  paymentMethod: '',
  illustrate: '',
  whetherToImitateTheBrand: '',
  insurancePremiumsReceivabl: '',
  RMBPrice: '',
  pieceArray: [],
  exchangeRate: 7.1285,
  bvjs: '1',
  mustPrice: '',
  qg_number: '', //批次号
  qg_name: '', //清关公司名称
  qg_zl: '', //清关公司转出重量
  qg_tj: '', //转出体积
  qg_md: '', //转出密度
  qg_send_worth: '', //转出货值
  qg_bl: '', //转出保率
  qg_bx: '', //转出保险
  qg_qtf: '', //转出其它费
  qg_pirce: '', //清关价格
  qg_money: '', //清关金额
  qg_type: '', //转出运输方式
  qg_ml: '', //毛利润
  qg_gnfy: '', //国内费用
  qg_yj: '', //押金
  qg_sbbz: '', //商标备注
  qg_fhzt: '', //出库状态
  qg_gwfy: '', //国外费用
  qg_hc: '', //后程不可回收
  djstatus: '', //单据状态
  shr: '', //审核人
  zdr: '', //制单人
  zdsj: '', //制单时间
  fyname: '', //返佣姓名
  fybl: '', //返佣比例
  fymoiney: '', //返佣金额
  fystatus: '', //返佣状态（未结款,已结款）
  fyremark: '', //返佣备注,
  foreignExpenses: '', //国外费用
  state: '', //单据状态
  audit: '', //审核人
  enact: '', //制单人
  enacttime: '', //制单时间
  brokerage_name: '', //返佣姓名
  brokerage_rate: '', //返佣比例
  brokerage_money: '', //返佣金额
  brokerage_status: '', //返佣状态
  brokerage_remark: '', //返佣备注,
  transport_expires: '', // 运输期限
  store_id: '', //仓库
  waybill: '' // 运单号
})

//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<form>>({
  customerManagement: [{ required: true, message: '客户号必填', trigger: 'blur' }],
  shipper: [{ required: true, message: '出库人必填', trigger: 'blur' }],
  waybill: [{ required: true, message: '运单号必填', trigger: 'blur' }],
  consignee: [{ required: true, message: '收货人必填', trigger: 'blur' }],
  // consigneePhone: [{ required: true, message: '收货人电话必填', trigger: 'blur' }],
  origin: [{ required: true, message: '始发地必填', trigger: 'blur' }],
  address: [{ required: true, message: '目的地必填', trigger: 'blur' }],
  modeOfTransport: [{ required: true, message: '运输方式必填', trigger: 'blur' }],
  typeOfGoods: [{ required: true, message: '货物种类必填', trigger: 'blur' }],
  packagingType: [{ required: true, message: '包装类型必填', trigger: 'blur' }],
  distributionMarket: [{ required: true, message: '分货市场必填', trigger: 'blur' }],
  store_id: [{ required: true, message: '货物仓库必填', trigger: 'blur' }]
})

// 运输期限
// const transitPriodArr: any = reactive([])
// 运费计算方式
const freightCalculationMethodArr: any = reactive([])

// 分货市场
// const distributionMarketArr: any = reactive([])
//
const bvjsselect: any = reactive([
  {
    label: '百货',
    value: '1'
  },
  {
    label: '服装',
    value: '2'
  },
  {
    label: '手动',
    value: '3'
  }
])
// 单据状态
const danjuArr: any = reactive([
  {
    label: '未核销',
    value: 0
  },
  {
    label: '已核销',
    value: 1
  }
])

// 返佣状态
const fanyongArr: any = reactive([
  {
    label: '未返佣',
    value: 0
  },
  {
    label: '已返佣',
    value: 1
  }
])

// 包装计算
const packagingCalculationArr: any = reactive([])
// 包装类型
const packagingTypeArr: any = reactive([
  {
    key: 0,
    value: '套袋'
  },
  {
    key: 1,
    value: '防水袋'
  },
  {
    key: 2,
    value: '原缠'
  },
  {
    key: 3,
    value: '木架'
  },
  {
    key: 4,
    value: '木托'
  },
  {
    key: 5,
    value: '木箱'
  },
  {
    key: 6,
    value: '整柜'
  },
  {
    key: 7,
    value: '纸箱'
  },
  {
    key: 8,
    value: '加固'
  },
  {
    key: 9,
    value: '压缩套包'
  },
  {
    key: 10,
    value: '护角'
  }
])
const selectUserBack = (e) => {
  console.log(e)
  let data = user_brokerArray.find((item) => item.value == e)
  if (data) {
    form.brokerage_rate = data.rate
  }
  fanyongSUM()
}
//返佣用户
const user_brokerArray: any = reactive([])
const get_user_brokerList = async () => {
  let res: any = await user_brokerageSelectpage()
  res.data.list.forEach((item) => {
    user_brokerArray.push({
      label: item.name,
      value: item.id,
      rate: item.rate
    })
  })
}
get_user_brokerList()
//业务列表
const yewuPople: any = reactive([])
const yewuList = async () => {
  let res: any = await empSelect()
  res.data.list.forEach((item) => {
    yewuPople.push({
      label: item.name,
      value: item.name
    })
  })
}
yewuList()

// 货物种类
const typeOfGoodsArr: any = reactive([])
const getgoodsSelect = async () => {
  let res: any = await goodsSel()
  res.data.list.forEach((item) => {
    typeOfGoodsArr.push({
      label: item.name,
      value: item.id
    })
  })
}
getgoodsSelect()
//始发地
const originArr: any = reactive([])
const getOriginArrList = async () => {
  let res = await placestartSelect()
  res.data.list.forEach((item) => {
    originArr.push({
      label: item.name,
      value: item.id
    })
  })
}
//分货市场
const distributionMarketArr: any = reactive([])
const getdistributionMarketList = async () => {
  let data = {
    page: 1,
    limit: 9999,
    search: '',
    sort: '',
    order: '',
    op: '',
    filter: `{"type":2}`
  }
  let res = await storeIndex(data)
  res.data.data.forEach((item) => {
    console.log('我是分货市场', item)
    distributionMarketArr.push({
      label: item.name,
      value: item.id
    })
  })
}
//目的地
const addressArr: any = reactive([])
const getadressArrList = async () => {
  let res = await placeendSelect()
  res.data.list.forEach((item) => {
    console.log('我是目的地', item)
    addressArr.push({
      label: item.name,
      value: item.id
    })
  })
}

// 货物位置
const storeArr: any = reactive([])
const getStoreSelect = async () => {
  let data = {
    page: 1,
    limit: 9999,
    search: '',
    sort: '',
    order: '',
    op: '',
    filter: `{"type":1}`
  }
  let res: any = await storeIndex(data)
  res.data.data.forEach((item) => {
    storeArr.push({
      label: item.name,
      value: item.id
    })
  })
}
// 清关公司下拉选择
const customArr: any = reactive([])
const getCustomArr = async () => {
  let res = await customsSelect()
  console.log('---清关公司数据---', res)
  res.data.list.forEach((item) => {
    customArr.push({
      label: item.name,
      value: item.id,
      transport: item.transport
    })
  })
}
//获取转出运输方式
const transportArr: any = reactive([])
const getExportTranspor = (e) => {
  // console.log(e)
  transportArr.length = 0
  let data = customArr.find((item) => {
    return item.value == e
  })
  let arr = data.transport ? JSON.parse(data.transport) : []
  if (arr.length > 0) {
    arr.forEach((element) => {
      transportArr.push(element)
    })
  }
  console.log('----transportArr-----', transportArr)
}
getCustomArr()
getgoodsSelect()

getOriginArrList()
getadressArrList(), getdistributionMarketList(), getStoreSelect()

//付款方式
const paymentMethodArr: any = reactive([])
//是否仿牌

//保率计算方式
const bfjs: any = reactive([])
//是否仿牌
const whetherToImitateTheBrandArr: any = reactive([])
const getOptions = async () => {
  let res: any = await deliverGetSelectList()
  //是否仿牌
  res.data.imitateList.forEach((item, index) => {
    whetherToImitateTheBrandArr.push({
      label: item,
      value: index
    })
  })
  //保率计算方式

  for (let a in res.data.insuranceList) {
    let b = res.data.insuranceList[a]
    bfjs.push({
      label: b,
      value: a
    })
  }
  //付款方式
  for (let a in res.data.paytypeList) {
    let b = res.data.paytypeList[a]
    paymentMethodArr.push({
      label: b,
      value: a
    })
  }
  //包装
  for (let a in res.data.packTypeList) {
    let b = res.data.packTypeList[a]
    packagingCalculationArr.push({
      label: b,
      value: a
    })
  }
  //运费计算
  for (let a in res.data.transportTypeList) {
    let b = res.data.transportTypeList[a]
    freightCalculationMethodArr.push({
      label: b,
      value: a
    })
  }
  console.log(res, bfjs, '下拉列表集合')
}
// 运输方式
const modeOfTransportArr: any = reactive([])
const getTransportSelect = async () => {
  let res: any = await transportSelectpage()
  res.data.list.forEach((item) => {
    modeOfTransportArr.push({
      label: item.name,
      value: item.id,
      density_arr: item.density_arr,
      transport_expires: item.predict
    })
  })
}
getOptions()
getTransportSelect()

//商品列表 穿
const shopList: any = reactive([])
const selShopList: any = ref([])

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase())
}

const activeName = ref('1')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}
//仓库已选择货物列表
const tableData: any = ref([])
//选择出库货物
const shopChange = (e) => {
  if (e.length > 0) {
    tableData.value = []
    let numTotal = 0
    let totalWeight = 0
    let worth = 0
    let volume = 0
    let price = 0
    form.totalVolume = 0
    console.log(e, '数组')
    e.map((item) => {
      let shopItem = shopList.find((i) => {
        return i.id == item
      })
      // console.log(shopItem, 111111111)
      shopItem.max = shopItem.piece
      shopItem.total = shopItem.piece * shopItem.quantity //总数量
      shopItem.m3 = Number(shopItem.length) * Number(shopItem.width) * Number(shopItem.high)
      shopItem.m3Total = shopItem.m3 * shopItem.piece //总体积
      shopItem.weightTotal = shopItem.weight * shopItem.piece //总重量
      // shopItem.weight = Number(shopItem.weight) * Number(shopItem.total)
      worth += Number(shopItem.worth) * Number(shopItem.quantity)
      price += Number(shopItem.price) * Number(shopItem.quantity) //销售价格
      totalWeight += Number(shopItem.weightTotal)
      numTotal += Number(shopItem.quantity)
      if (Number(shopItem.length) && Number(shopItem.width) && Number(shopItem.high)) {
        volume += Number(shopItem.m3Total)
      }
      tableData.value.push(shopItem)
    })

    form.number = numTotal //总数
    form.totalVolume = volume // 总体积
    form.totalWeight = totalWeight //总重量
    form.totalNumberOfpices = e.length //总数量
    form.RMBPrice = price > 0 ? price : worth //人民币货值
    form.dollarPrice = (price > 0 ? price : worth / form.exchangeRate).toFixed(0) //美金货值
    form.valuePreservationPerKilogram = Number(form.dollarPrice / totalWeight).toFixed(0) //每公斤货值
    form.guaranteeRate = blSum() //保率
    form.businessFloorPrice = Number(form.dollarPrice * form.guaranteeRate * 0.01).toFixed(2)
    midu()
    yunfeiSum()
  } else {
    tableData.value = []
  }
}

const yunfeiSum = () => {
  // if (form.freightCalculationMethod == 1) {
  //按重量
  // console.log(form.modeOfTransport, '运输方式ID')
  let data = modeOfTransportArr.find((item) => {
    // console.log(item, 'item')
    return item.value == form.modeOfTransport
  })
  if (data) {
    if (form.freightCalculationMethod == 3) {
      form.freight = form.fieghtPrice * form.totalNumberOfpices
      return false
    }
    let arr = data.density_arr //取值范围数组
    for (let a = 0; a < arr.length; a++) {
      if (arr[a].price) {
        if (Number(form.density) > arr[a].max) {
          console.log('大于最大值')
          form.fieghtPrice = arr[a].price
          if (form.freightCalculationMethod == 1) {
            form.freight = form.fieghtPrice * form.totalWeight
          } else if (form.freightCalculationMethod == 2) {
            form.freight = form.fieghtPrice * form.totalVolume
          }
          return false
        } else {
          if (Number(arr[a].min) <= Number(form.density) && Number(form.density) <= arr[a].max) {
            console.log('触发区间段')
            form.fieghtPrice = arr[a].price
            if (form.freightCalculationMethod == 1) {
              form.freight = form.fieghtPrice * form.totalWeight
            } else if (form.freightCalculationMethod == 2) {
              form.freight = form.fieghtPrice * form.totalVolume
            }
            return false
          }
          if (Number(arr[arr.length - 1].min) > Number(form.density)) {
            console.log('触发最小值')
            form.fieghtPrice = arr[arr.length - 1].price
            if (form.freightCalculationMethod == 1) {
              form.freight = form.fieghtPrice * form.totalWeight
            } else if (form.freightCalculationMethod == 2) {
              form.freight = form.fieghtPrice * form.totalVolume
            }
            return false
          }
        }
      }
    }
  }
  // }
}
//
const zhuanchuSum = () => {
  //转出配货计算
  if (!form.customs_name || !form.export_transport) {
    ElMessage({
      message: '请先选择清关公司和转出运输方式',
      type: 'warning'
    })
    return false
  }
  if (!form.export_weight) form.export_weight = form.totalWeight
  if (!form.export_volume) form.export_volume = form.totalVolume
  form.export_density = (Number(form.export_weight) / Number(form.export_volume)).toFixed(2) //密度
  form.export_value = form.export_value ? form.export_value : form.dollarPrice //货值
  form.export_insurance_rate = blSum() //保率
  form.export_insure = ((form.export_value * form.export_insurance_rate) / 100).toFixed(2)
  fieghtPriceChangePH()
}
// 转出运费单价
const fieghtPriceChangePH = () => {
  let data = transportArr.find((item) => {
    return item.name == form.export_transport
  })
  console.log(data, 'data')
  if (data) {
    let arr = []
    form.freightCalculationMethod == 1 ? (arr = data.Zlist) : (arr = data.Tlist)
    console.log(arr)
    for (let a = 0; a < arr.length; a++) {
      if (arr[a].name) {
        if (Number(form.density) > arr[a].max) {
          console.log('大于最大值')
          form.customs_price = arr[a].name
          return false
        } else {
          if (Number(arr[a].min) <= Number(form.density) && Number(form.density) <= arr[a].max) {
            console.log('触发区间段')
            form.customs_price = arr[a].name
            return false
          }
          if (Number(arr[arr.length - 1].min) > Number(form.density)) {
            console.log('触发最小值')
            form.customs_price = arr[arr.length - 1].name
            return false
          }
        }
      }
    }
  }
}

const SUM2Data = () => {
  midu()
  yunfeiSum()

  // console.log(form.dollarPrice, form.totalWeight)
  form.valuePreservationPerKilogram = Number(form.dollarPrice / form.totalWeight).toFixed(2) //每公斤货值
  form.guaranteeRate = blSum()
  form.businessFloorPrice = Number(form.dollarPrice * form.guaranteeRate * 0.01).toFixed(2)
  form.totalReceivableExpenses = (
    Number(form.freight) +
    Number(form.businessFloorPrice) +
    Number(form.packingCharge) +
    Number(form.invoicing) +
    Number(form.surcharge) +
    Number(form.shortdistancefeeUSD) +
    Number(form.otherReceivables) +
    Number(form.foreignExpenses)
  ).toFixed(2)
}
//重新计算
const SUMData = () => {
  let numTotal = 0
  let totalWeight = 0
  let worth = 0
  let price = 0
  let volume = 0
  form.totalVolume = 0
  tableData.value.map((shopItem) => {
    shopItem.m3 = (
      Number(shopItem.length) *
      Number(shopItem.width) *
      Number(shopItem.high)
    ).toFixed(3)
    shopItem.m3Total = Number(shopItem.m3 * shopItem.piece).toFixed(3) //总体积
    shopItem.weightTotal = Number(shopItem.weight * shopItem.piece) //总重量
    // shopItem.weight = Number(shopItem.weight) * Number(shopItem.total)
    worth += Number(shopItem.worth) * Number(shopItem.total)
    price += Number(shopItem.price) * Number(shopItem.quantity) //销售价格
    totalWeight += Number(shopItem.weightTotal)
    numTotal += Number(shopItem.piece)
    if (Number(shopItem.length) && Number(shopItem.width) && Number(shopItem.high)) {
      volume += Number(shopItem.m3Total)
    }
  })
  // console.log(worth, 111111111)
  form.shortdistancefeeUSD = (form.shortdistancefee * form.exchangeRate).toFixed(2) //短途美金
  form.number = numTotal //总数
  form.totalVolume = volume.toFixed(2) // 总体积
  form.totalWeight = totalWeight //总重量
  form.totalNumberOfpices = tableData.value.length //总数量
  form.RMBPrice == price > 0 ? price : worth //人民币货值
  // console.log(form.exchangeRate)
  form.dollarPrice = (Number(price > 0 ? price : worth) / Number(form.exchangeRate)).toFixed(0) //美金货值
  form.valuePreservationPerKilogram = Number(form.dollarPrice / totalWeight).toFixed(0) //每公斤货值
  // console.log(form.valuePreservationPerKilogram, 'form.valuePreservationPerKilogram ')
  form.guaranteeRate = blSum() //保率
  form.businessFloorPrice = Number((form.dollarPrice * form.guaranteeRate) / 100).toFixed(2)
  midu()
  yunfeiSum()
  //总费用计算
  form.totalReceivableExpenses = (
    Number(form.freight) +
    Number(form.businessFloorPrice) +
    Number(form.packingCharge) +
    Number(form.invoicing) +
    Number(form.surcharge) +
    Number(form.shortdistancefeeUSD) +
    Number(form.otherReceivables) +
    Number(form.foreignExpenses)
  ).toFixed(2)
}
// const huozhiSum = () => {

// }
//保率计算
const blSum = () => {
  if (!form.bvjs) {
    ElMessage({
      message: '请选择保险计算方式',
      type: 'warning'
    })
  }
  form.valuePreservationPerKilogram = Number(form.valuePreservationPerKilogram)
  // console.log(11111, form.valuePreservationPerKilogram)
  // console.log(form.bvjs, '类型')
  switch (form.bvjs) {
    case '1':
      // console.log(form.valuePreservationPerKilogram, 222222222)
      if (form.valuePreservationPerKilogram <= 30) {
        return 1
      } else if (
        30 < form.valuePreservationPerKilogram &&
        form.valuePreservationPerKilogram <= 50
      ) {
        return 2
      } else if (form.valuePreservationPerKilogram > 50) {
        return 3
      }
      break
    case '2':
      if (form.valuePreservationPerKilogram <= 20) {
        return 1
      } else if (
        20 < form.valuePreservationPerKilogram &&
        form.valuePreservationPerKilogram <= 30
      ) {
        return 2
      } else if (form.valuePreservationPerKilogram > 30) {
        return 3
      }
      break
    default:
      return ''
  }
}
//密度计算
const midu = () => {
  if (form.totalWeight && form.totalVolume) {
    form.density = (Number(form.totalWeight) / Number(form.totalVolume)).toFixed(2)
  } else {
    form.density = ''
  }
}
//获取客户号
const loading = ref(false)

// const customerList = ref<ListItem[]>([])
const customerManagementOptions: any = reactive([])
const getClientSelect = async () => {
  let res: any = await clientSelect({})
  res.data.list.forEach((item) => {
    customerManagementOptions.push({
      label: item.code,
      value: item.code,
      fahuo: item.fahuo
    })
  })
}
//选择出库人
getClientSelect()
const selectCustomer = (val) => {
  // console.log(val, 'val')
  let data = customerManagementOptions.find((item) => {
    // console.log(item, 'item')
    return item.value == val
  })
  console.log(data, 'data')
  // console.log(form)
  selectPople(val)
  form.shipper = data?.fahuo
}
//收货人
// const Dil = {
//   lock: true,
//   text: '数据读取中',
//   background: 'rgba(0, 0, 0, 0.7)'
// }
const pople: any = reactive([])
const selectPople = async (e) => {
  // const loadingInstance = ElLoading.service(Dil)
  pople.pop()
  form.consignee = ''
  // let res: any = await consigneeIndex({ fliter: `{"client_code":${e}}` })
  let data = {
    page: 1,
    limit: 9999,
    search: '',
    sort: '',
    order: '',
    op: `{"client code":"like"}`,
    filter: e ? `{"client_code":"${e}"}` : ''
  }
  let res: any = await consigneeIndex(data)
  res.data.data.forEach((item) => {
    pople.push({
      label: item.name,
      value: item.name,
      code: item.client_code
    })
  })
  // loadingInstance.close()
}
selectPople('')
const selectKehu = (e) => {
  // console.log(e, 'eee')
  let data = pople.find((item) => {
    return item.value == e
  })
  console.log(data, 'data')
  form.customerManagement = data.code
  selectCustomer2(data.code)
}
const selectCustomer2 = (val) => {
  // console.log(val, 'val')
  let data = customerManagementOptions.find((item) => {
    // console.log(item, 'item')
    return item.value == val
  })
  // console.log(data, 'data')
  // console.log(form)
  form.shipper = data?.fahuo
}
let miduArr: any = reactive([])

watch(form, (newVal, oldVal) => {
  if (form.modeOfTransport) {
    modeOfTransportArr.forEach((item) => {
      // console.log('---modeOfTransportArr-item---', item)
      if (item.value == form.modeOfTransport) {
        form.modeOfTransportText = item.label
        form.transport_expires = item.transport_expires
        miduArr = item.density_arr ? item.density_arr : []
      }
    })
  }

  if (form.typeOfGoods) {
    typeOfGoodsArr.forEach((item) => {
      if (item.value == form.typeOfGoods) {
        form.typeOfGoodsText = item.label
      }
    })
  }

  if (form.origin) {
    originArr.forEach((item) => {
      if (item.value == form.origin) {
        form.originText = item.label
      }
    })
  }

  if (form.address) {
    addressArr.forEach((item) => {
      if (item.value == form.address) {
        form.addressText = item.label
      }
    })
  }

  if (form.packagingType) {
    packagingTypeArr.forEach((item) => {
      if (item.key == form.packagingType) {
        form.packagingTypeText = item.value
      }
    })
  }

  if (form.distributionMarket) {
    distributionMarketArr.forEach((item) => {
      if (item.value == form.distributionMarket) {
        form.distributionMarketText = item.label
      }
    })
  }

  // // 计算总费用
  // if (
  //   form.freight &&
  //   form.businessFloorPrice &&
  //   form.invoicing &&
  //   form.packingCharge &&
  //   form.surcharge &&
  //   form.shortdistancefeeUSD &&
  //   form.otherReceivables &&
  //   form.foreignExpenses
  // ) {
  //   form.totalReceivableExpenses =
  //     Number(form.freight) +
  //     Number(form.businessFloorPrice) +
  //     Number(form.invoicing) +
  //     Number(form.packingCharge) +
  //     Number(form.surcharge) +
  //     Number(form.shortdistancefeeUSD) +
  //     Number(form.otherReceivables) +
  //     Number(form.foreignExpenses)
  // }
})
const fanyongSUM = () => {
  form.brokerage_money = form.brokerage_rate * form.totalWeight * 0.01
}
const getRepertorIndex = async () => {
  if (form.customerManagement && form.typeOfGoods && form.store_id) {
    console.log('---需要查询仓库货物数据---', form.typeOfGoods)
    shopList.splice(0, shopList.length)
    let res = await getClientRepertoryList({
      client_code: form.customerManagement,
      goods_ids: form.typeOfGoods.join(','),
      store_id: form.store_id,
      pageSize: 10000,
      page: 1
    })

    res.data.data.forEach((item) => {
      console.log(item, 'item')
      let time = item.createtime
      const date = new Date(time * 1000)
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      item.Cname = `${item.gname}(${Y}${M}${D})`
      // item.m3 = item.length * item.high * item.weight
      shopList.push(item)
    })
    console.log('---shopList---', shopList)

    if (isEidt.value) {
      let goodsStr = currentRowVal.goods.replace(/&quot;/g, '"')
      let goodsArr: any = JSON.parse(goodsStr)
      let arr: any = []
      goodsArr.forEach((item: any) => {
        arr.push(item.id)
        tableData.value.push(item)
      })
      console.log('---编辑状态---', tableData.value)
      // shopChange(arr)
    }
  }
}

// 运费计算方式更改
const yunfeiChange = (ev) => {
  console.log('---运费计算变更---', ev)
  if (ev == 1) {
    miduArr.length > 0 &&
      miduArr.forEach((item) => {
        if (Number(form.density) >= Number(item.min) && Number(form.density) <= Number(item.max)) {
          form.fieghtPrice = item.price
        } else {
          form.fieghtPrice = 0
        }
      })

    form.fieght = form.fieghtPrice * form.totalWeight
  }
  if (ev == 2 && form.fieghtPrice >= 0) {
    form.freight = form.fieghtPrice * form.totalVolume
  }
  if (ev == 3 && form.fieghtPrice >= 0) {
    form.freight = form.fieghtPrice * form.number
  }
}

// 输入运费价格
const fieghtPriceChange = () => {
  if (form.freightCalculationMethod == 1) {
  }
  if (form.freightCalculationMethod == 2 && form.fieghtPrice) {
    form.freight = form.fieghtPrice * form.totalVolume
  }
  if (form.freightCalculationMethod == 3 && form.fieghtPrice) {
    form.freight = form.fieghtPrice * form.number
  }
}

// 定义组件的方法
defineExpose({
  // 获取填写的表单数据
  getFormData: () => {
    return form
  },
  // 获取出库的货品
  getTabelData: () => {
    return tableData.value
  },
  getRlus: () => {
    return ruleFormRef
  }
})
</script>

<template>
  <ElForm :model="form" ref="ruleFormRef" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="20">
        <ElRow>
          <ElCol :span="4">
            <ElFormItem label-width="90px" prop="waybill" label="运单号">
              <ElInput v-model="form.waybill" />
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="customerManagement"
              :label="t('customerManagement.customerNo')"
            >
              <!-- <ElInput v-model="form.customerManagement" /> -->
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.customerManagement"
                :loading="loading"
                filterable
                @change="selectCustomer($event)"
              >
                <el-option
                  v-for="item in customerManagementOptions"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" prop="shipper" :label="t('customerManagement.shipper')">
              <ElInput class="qianlan" v-model="form.shipper" />
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="consignee"
              :label="t('customerManagement.consignee')"
            >
              <!-- <ElInput v-model="form.consignee" /> -->
              <ElSelect
                clearable
                v-model="form.consignee"
                filterable
                :placeholder="t('common.selectText')"
                @change="selectKehu"
              >
                <ElOption
                  v-for="item in pople"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="consigneePhone"
              :label="t('customerManagement.consigneePhone')"
            >
              <ElInput v-model="form.consigneePhone" />
            </ElFormItem>
            <ElFormItem label-width="90px" prop="origin" :label="t('router.origin')">
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.origin"
                filterable
                :placeholder="t('alertEn.PleaseSelectTheorigin')"
              >
                <ElOption
                  v-for="item in originArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="address"
              :label="t('warehousingEntry.destination')"
            >
              <ElSelect
                class="qianlan"
                v-model="form.address"
                filterable
                :placeholder="t('alertEn.destination')"
              >
                <ElOption
                  v-for="item in addressArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('purchaseOrder.salespersonName')">
              <!-- <ElInput v-model="form.salespersonName" /> -->
              <ElSelect v-model="form.salespersonName" filterable>
                <ElOption
                  v-for="item in yewuPople"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem
              label-width="90px"
              prop="modeOfTransport"
              :label="t('warehousingEntryAddWrite.modeOfTransport')"
            >
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.modeOfTransport"
                :placeholder="t('alertEn.PleaseSelectThemodeOfTransport')"
                filterable
              >
                <ElOption
                  v-for="item in modeOfTransportArr"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="typeOfGoods"
              :label="t('warehousingEntry.typeOfGoods')"
            >
              <ElSelect
                clearable
                class="qianlan"
                :style="{ width: '100%' }"
                multiple
                filterable
                v-model="form.typeOfGoods"
                :placeholder="t('alertEn.PleaseSelectThetypeOfGoods')"
              >
                <ElOption
                  v-for="item in typeOfGoodsArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="packagingType"
              :label="t('warehousingEntryAddWrite.packagingType')"
            >
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.packagingType"
                multiple
                :placeholder="t('alertEn.PleaseSelectThepackagingType')"
                filterable
              >
                <ElOption
                  v-for="item in packagingTypeArr"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              prop="distributionMarket"
              :label="t('router.distributionMarket')"
            >
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.distributionMarket"
                :placeholder="t('alertEn.PleaseSelectThedistributionMarket')"
                filterable
              >
                <ElOption
                  v-for="item in distributionMarketArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.businessFloorPrice')">
              <ElInput class="lvse" v-model="form.base_price" @blur="SUMData">
                <template #append>%</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label-width="100px" :label="t('purchaseOrder.businessFloorreight')">
              <ElInput v-model="form.businessFloorreight" />
            </ElFormItem>
            <ElFormItem label-width="100px" label="业务底价参考">
              <ElInput v-model="form.businessFloorreight" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" prop="store_id" label="货物仓库">
              <ElSelect
                clearable
                class="qianlan"
                v-model="form.store_id"
                filterable
                :placeholder="t('common.selectText')"
              >
                <ElOption
                  v-for="item in storeArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem
              label-width="90px"
              :label="t('warehousingEntryAddWrite.productNameRemarks')"
            >
              <ElInput class="qianlan" v-model="form.productNameRemarks" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.totalWeight')">
              <ElInput v-model="form.totalWeight" @blur="midu"
                ><template #append>KG</template></ElInput
              >
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.totalVolume')">
              <ElInput v-model="form.totalVolume" @blur="midu">
                <template #append>m³</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.totalNumberOfpices')">
              <ElInput v-model="form.totalNumberOfpices" disabled>
                <template #append>包</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('warehousingEntryAddWrite.number')">
              <ElInput v-model="form.number" disabled />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('purchaseOrder.density')">
              <ElInput v-model="form.density" disabled />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('purchaseOrder.transitPriod')">
              <ElInput v-model="form.transport_expires" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" :label="t('invoiceAddwrite.rmbValue')">
              <ElInput v-model="form.RMBPrice">
                <template #append>￥</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.usDollarCreditValue')">
              <ElInput v-model="form.dollarPrice" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="保险类型">
              <ElSelect
                class="qianlan"
                v-model="form.bvjs"
                :placeholder="t('alertEn.PleaseSelectThepackagingCalculation')"
                filterable
              >
                <ElOption
                  v-for="item in bvjsselect"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.guaranteeRate')">
              <ElInput v-model="form.guaranteeRate" :disabled="form.bvjs != '手动'">
                <template #append>%</template>
              </ElInput>
            </ElFormItem>

            <ElFormItem label-width="90px" :label="t('invoice.insurancePremiumsReceivabl')">
              <ElInput v-model="form.businessFloorPrice" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="包装费">
              <ElInput v-model="form.packingCharge" @blur="SUMData" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoiceAddwrite.packagingCalculation')">
              <ElSelect
                class="qianlan"
                v-model="form.packagingCalculation"
                :placeholder="t('alertEn.PleaseSelectThepackagingCalculation')"
                filterable
              >
                <ElOption
                  v-for="item in packagingCalculationArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" label="包装系数">
              <ElInput v-model="form.pack_fee" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="100px" :label="t('invoice.shortdistancefee')">
              <ElInput v-model="form.shortdistancefee">
                <template #append>￥</template>
              </ElInput>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoiceAddwrite.shortEistanceFeeInUSD')">
              <ElInput v-model="form.shortdistancefeeUSD" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.otherReceivables')">
              <ElInput v-model="form.otherReceivables" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="每公斤货值">
              <ElInput v-model="form.valuePreservationPerKilogram" disabled />
              <!-- <ElInput v-model="form.valuePreservationPerKilogram" /> -->
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.invoicing')">
              <ElInput class="huangse" v-model="form.invoicing" />
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" :label="t('formZD.exchangeRate')">
              <ElInput v-model="form.exchangeRate" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoiceAddwrite.surcharge')">
              <ElInput v-model="form.surcharge" />
            </ElFormItem>
            <ElFormItem label-width="100px" :label="t('invoiceAddwrite.freightCalculationMethod')">
              <ElSelect
                class="qianlan"
                v-model="form.freightCalculationMethod"
                :placeholder="t('alertEn.PleaseSelectThefreightCalculationMethod')"
                filterable
                @change="yunfeiChange"
              >
                <ElOption
                  v-for="item in freightCalculationMethodArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" label="运费单价">
              <ElInput class="huangse" v-model="form.fieghtPrice" @blur="fieghtPriceChange" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoiceAddwrite.freight')">
              <ElInput v-model="form.freight" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.totalReceivableExpenses')">
              <ElInput class="red_input" v-model="form.totalReceivableExpenses" />
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('invoice.paymentMethod')">
              <ElSelect
                class="qianlan"
                v-model="form.paymentMethod"
                :placeholder="t('alertEn.PleaseSelectThepaymentMethod')"
                filterable
              >
                <ElOption
                  v-for="item in paymentMethodArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" :label="t('invoice.illustrate')">
              <ElInput v-model="form.illustrate" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="审核人">
              <ElInput v-model="form.audit" disabled />
            </ElFormItem>
            <ElFormItem label-width="90px" label="制单人">
              <ElInput v-model="form.enact" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="制单时间">
              <ElInput v-model="form.enacttime" disabled />
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" label="返佣用户">
              <ElSelect
                v-model="form.brokerage_name"
                placeholder="请选择"
                filterable
                @change="selectUserBack($event)"
              >
                <ElOption
                  v-for="item in user_brokerArray"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" label="返佣金额">
              <ElInput v-model="form.brokerage_money" />
            </ElFormItem>
            <ElFormItem label-width="90px" label="返佣状态">
              <ElSelect v-model="form.brokerage_status" placeholder="请选择" filterable>
                <ElOption
                  v-for="item in fanyongArr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
          </ElCol>
          <ElCol :span="4">
            <ElFormItem label-width="90px" label="是否仿牌">
              <ElSelect
                class="qianlan"
                v-model="form.whetherToImitateTheBrand"
                placeholder="请选择是否仿牌"
                filterable
              >
                <ElOption
                  v-for="item in whetherToImitateTheBrandArr"
                  :key="item.key"
                  :label="item.label"
                  :value="item.value"
                />
              </ElSelect>
            </ElFormItem>
            <ElFormItem label-width="90px" :label="t('formZD.notes')">
              <ElInput v-model="form.notes" /> </ElFormItem
          ></ElCol>
        </ElRow>
        <ElButton type="primary" @click="SUMData">自动计算货值</ElButton>
        <ElButton type="primary" @click="SUM2Data">手动求和</ElButton>
      </ElCol>
      <ElCol :span="4">
        <ElFormItem label-width="100px" label="清关公司名称">
          <ElSelect
            clearable
            class="qianlan"
            v-model="form.customs_name"
            :loading="loading"
            filterable
            @change="getExportTranspor($event)"
          >
            <el-option
              v-for="item in customArr"
              :key="item.id"
              :label="item.label"
              :value="item.value"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label-width="100px" label="转出运输方式">
          <ElSelect
            clearable
            class="qianlan"
            v-model="form.export_transport"
            :loading="loading"
            filterable
          >
            <el-option
              v-for="item in transportArr"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            />
          </ElSelect>
        </ElFormItem>
        <ElFormItem label-width="90px">
          <ElButton type="primary" @click="zhuanchuSum">重新配货</ElButton>
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出重量">
          <ElInput v-model="form.export_weight" />
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出体积">
          <ElInput v-model="form.export_volume">
            <template #append>m³</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出密度">
          <ElInput v-model="form.export_density" disabled />
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出货值">
          <ElInput v-model="form.export_value">
            <template #append>$</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出保率">
          <ElInput v-model="form.export_insurance_rate">
            <template #append>%</template>
          </ElInput>
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出保险">
          <ElInput v-model="form.export_insure" disabled />
        </ElFormItem>
        <ElFormItem label-width="90px" label="转出其它费">
          <ElInput v-model="form.export_other_fund" />
        </ElFormItem>
        <ElFormItem label-width="100px" label="清关参考单价">
          <ElInput v-model="form.customs_price" disabled />
        </ElFormItem>
        <ElFormItem label-width="100px" label="清关金额">
          <ElInput v-model="form.customs_money" disabled />
        </ElFormItem>

        <!-- <ElFormItem label-width="90px" label="毛利润">
          <ElInput v-model="form.margin" disabled />
        </ElFormItem> -->
        <!-- <ElFormItem label-width="90px" label="国内费用">
          <ElInput v-model="form.internal_charge" disabled />
        </ElFormItem> -->
        <ElFormItem label-width="90px" label="押金">
          <ElInput v-model="form.pledge" />
        </ElFormItem>
        <ElFormItem label-width="90px" label="商标备注">
          <ElInput v-model="form.remark2" />
        </ElFormItem>
        <!-- <ElFormItem label-width="90px" label="出库状态">
          <ElInput v-model="form.a" disabled />
        </ElFormItem> -->
        <!-- <ElFormItem label-width="90px" label="国外费用">
          <ElInput v-model="form.foreign_charge" disabled />
        </ElFormItem> -->
        <!-- <ElFormItem label-width="100px" label="后程不可回收">
          <ElInput v-model="form.houcheng" disabled />
        </ElFormItem> -->
      </ElCol>
    </ElRow>
    <ElRow v-if="form.status < 4">
      <ElForm class="btn">
        <ElButton type="primary" @click="getRepertorIndex">拉取库存</ElButton>
        <ElButton type="primary">重置库存信息</ElButton>
      </ElForm>
    </ElRow>
    <ElRow>
      <ElTransfer
        v-model="selShopList"
        :data="shopList"
        filterable
        :titles="['仓存货物', '出库货物']"
        @change="shopChange"
        :props="{
          key: 'id',
          label: 'Cname'
        }"
        v-if="form.status < 4"
      />
      <ElButton type="primary" @click="SUMData">计算密度</ElButton>
      <ElTable :data="tableData" stripe style="width: 100%">
        <ElTableColumn prop="gname" label="货号" width="200" />
        <ElTableColumn prop="room" label="房间号" width="100">
          <template #default="scope">
            <ElInput v-model="scope.row.room" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="piece" label="件数" width="180">
          <template #default="scope">
            <el-input-number
              v-model="scope.row.piece"
              :min="1"
              :max="scope.row.max"
              :precision="0"
            />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="quantity" label="单件数量" width="120" />
        <ElTableColumn prop="total" label="总数量" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.total" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="color" label="颜色" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.color" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="length" label="长(m)" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.length" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="weigth" label="宽(m)" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.width" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="high" label="高(m)" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.high" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="m3" label="单品体积(m³)" width="120" />
        <ElTableColumn prop="m3Total" label="体积合计(m³)" width="120" />
        <ElTableColumn prop="weight" label="单品重量(KG)" width="120">
          <template #default="scope">
            <ElInput v-model="scope.row.weight" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="weightTotal" label="重量合计(KG)" width="120" />
        <ElTableColumn prop="remark" label="备注" width="200">
          <template #default="scope">
            <ElInput v-model="scope.row.remark" />
          </template>
        </ElTableColumn>
        <ElTableColumn prop="style_no" label="款号" width="200">
          <template #default="scope">
            <ElInput v-model="scope.row.style_no" />
          </template>
        </ElTableColumn>
        <!-- <ElTableColumn label="操作" fixed="right" width="200">
          <ElButton>同步库存</ElButton>
        </ElTableColumn> -->
      </ElTable>
    </ElRow>
  </ElForm>
</template>
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.btn {
  margin: 0px 0 10px 0;
}
:deep(.red_input .el-input__wrapper) {
  background: #ff8080;
}
:deep(.el-transfer-panel) {
  width: 400px;
}
:deep(.el-transfer-panel__body) {
  height: 500px;
}

.spaceDiv {
  margin: 50px 0;
}

.qianlan {
  background: #ccffff !important;
}
.lvse {
  background: #00ff80 !important;
}
.huangse {
  background: #ffff80 !important;
}
:deep(.huangse .el-input__wrapper) {
  background-color: transparent !important;
}
:deep(.qianlan .el-input__wrapper) {
  background-color: transparent !important;
}

:deep(.lvse .el-input__wrapper) {
  background-color: transparent !important;
}

:deep(.qianlan .el-input.el-input--suffix) {
  background: transparent !important;
}
:deep(.qianlan .el-input.el-input--suffix .el-input__wrapper) {
  background-color: transparent !important;
}
</style>
